<template>
	<view>
		<view class="kind-content"  v-for="(item,index) in categorys" :key="item.id" :class="index == 0 ||index == 3? 'red' : ''"
			>
			<navigator :url="`/pages/home/goodsInfo/goodsInfo?id=${item.id}`">
			<view  class="kind-box">
			<!-- :v-if="index == 2 ||index == 3? this.hidden = false : this.hidden = true" -->
			
					<view class="kind-text1">
							{{item.name}}
					</view>
			<view class="kind-img">
				<image :src="item.icon" style="width: 260px; height:195px;"></image>
			</view>
				
			</view>
			 </navigator>
		</view>
		
		
		<!-- 尾巴 -->
	</view>
</template>

<script>
	import{
		categorys
	}from "@/api/home/index.js"
	export default {
		data() {
			return {
				categorys:[],
				// hidden:true,
			};
		},
		onLoad(){
		
			var _this = this;
			categorys("1308336521604599809")
			.then(res =>{
				console.log(res)
				_this.categorys = res.data.data.category.children
			})
	}
	}
</script>

<style lang="scss" scoped>
	.kind-content{
		display: flex;
		justify-content:  space-around;
		align-items: center;
		flex-wrap: wrap;
			 width: 90%;
			 	 margin: 20px auto;
				 border-radius: 16px;
				 height: 195px;
		.kind-box{
			display: flex;
		justify-content:  space-around;
		align-items: center;
		
			 margin: 20px auto;
			
			.kind-img{
				height: 100%;
				image{
					display: block;
					
					
				}
			}
		}
	}

.red{
	background-color: #808080;
}
.hidden{
	display: none;
}
</style>
